<template>
    <a-modal v-bind="defaultModalProps" v-model:open="arbitrary" title="扫码访问微招聘官网" :footer="null"
        :width="650"
        :body-style="{paddingInline: '8px', paddingBlockStart: '56px', paddingBlockEnd: '36px'}"
    >
        <div class="flex flex-col items-center gap-8">
            <QRCode :value="link" :size="280" :bordered="false" />
            <p class="text-primary text-base">手机扫码访问</p>
        </div>
        <a-input-group compact class="!mt-8">
            <a-input :value="link" disabled style="width: calc(100% - 104px); height: 48px;" />
            <a-button type="primary" class="!h-12" @click="copy(link)">复制网址</a-button>
        </a-input-group>
    </a-modal>
</template>
<script lang="ts" setup>
import { QRCode } from 'ant-design-vue'
import { defaultModalProps } from '@/constants/comp-setting'
import { type Exposed } from './type'
defineOptions({
    name: 'CompanyWebModal',
    inheritAttrs: false
})
defineExpose<Exposed>({
    open(_link: string) {
        link.value = _link
        arbitrary.value = true
    },
})
const link = ref()
const arbitrary = ref(false)
const { copy } = useCopy()
</script>